<template>
  <div>
    <nav-bar title="违章查询统计"></nav-bar>
    <div class="IllegalStatistical maxinBox">
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24">
            <div class="title">
              <div>
                本月违章类型统计
              </div>
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat" :options="chatData"></my-echarts>
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24">
            <div class="title">
              <div>
                本月违章新增趋势
              </div>
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat1" :options="chatData1"></my-echarts>
      </div>
    </div>
  </div>
</template>

<script>
  import illgalAPI from '../../../../api/workAPI/illegalQueryAPI.js'
  import MyEcharts from '../../../../components/MyChart.vue'
  export default {
    components: {
      MyEcharts
    },
    data() {
      return {
        illegalDate: [],
        illegalData: [],
        illegalTypeData: [],
        illegalType: [],
        chatData1: {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新增',
                    type: 'line',
                    stack: '总量',
                    data: []
                }
            ]
          },
        chatData: {
            "animation": true,
            "legend": {
                "width": "100%",
                "left": "center",
                "textStyle": {
                    "color": "#666",
                    "fontSize": 14
                },
                "icon": "circle",
                "right": "0",
                "bottom": "0",
                "data": []
            },
            "series": [{
                "type": "pie",
                "center": ["50%", "50%"],
                "radius": ["30%", "43%"],
                "color": ["#FF9946", "#37B919", "#9E87FF", '#1d65e1'],
                "startAngle": 5,
                "labelLine": {
                    "normal": {
                        "length": 15
                    }
                },
                "label": {
                    "normal": {
                        "formatter": " {per|{c}人/{d}%} ",
                        "backgroundColor": "rgba(255, 147, 38, 0)",
                        "borderColor": "transparent",
                        "borderRadius": 4,
                        "rich": {
                            "a": {
                                "color": "#999",
                                "lineHeight": 22,
                                "align": "center"
                            },
                            "hr": {
                                "borderColor": "#aaa",
                                "width": "100%",
                                "borderWidth": 1,
                                "height": 0
                            },
                            "b": {
                                "color": "#999",
                                "fontSize": 14,
                                "lineHeight": 33
                            },
                            "c": {
                                "fontSize": 14,
                                "color": "#eee"
                            },
                            "per": {
                                "color": "#999",
                                "fontSize": 14,
                                "padding": [5, 8],
                                "borderRadius": 2
                            }
                        },
                        "textStyle": {
                            "color": "#666",
                            "fontSize": 14
                        }
                    }
                },
                "emphasis": {
                    "label": {
                        "show": true,
                        "formatter": " {per|{d}%}  ",
                        "backgroundColor": "rgba(255, 147, 38, 0)",
                        "borderColor": "transparent",
                        "borderRadius": 4,
                        "rich": {
                            "a": {
                                "color": "#999",
                                "lineHeight": 22,
                                "align": "center"
                            },
                            "hr": {
                                "borderColor": "#aaa",
                                "width": "100%",
                                "borderWidth": 1,
                                "height": 0
                            },
                            "b": {
                                "color": "#666",
                                "fontSize": 14,
                                "lineHeight": 33
                            },
                            "c": {
                                "fontSize": 12,
                                "color": "#eee"
                            },
                            "per": {
                                "color": "#999",
                                "fontSize": 16,
                                "padding": [5, 6],
                                "borderRadius": 2
                            }
                        }
                    }
                },
                "data": []
            }, {
                "type": "pie",
                "center": ["50%", "50%"],
                "radius": ["25%", "26%"],
                "label": {
                    "show": false
                },
                "data": [{
                    "value": 78,
                    "itemStyle": {
                        "normal": {
                            "color": {
                                "x": 0,
                                "y": 0,
                                "x2": 1,
                                "y2": 0,
                                "type": "linear",
                                "global": false,
                                 "colorStops": [{
                                  "offset": 0,
                                  "color": "#9F17FF"
                              }, {
                                  "offset": 0.2,
                                  "color": "#01A4F7"
                              }, {
                                  "offset": 0.5,
                                  "color": "#FE2C8A"
                              }, {
                                  "offset": 0.8,
                                  "color": "#FEE449"
                              }, {
                                  "offset": 1,
                                  "color": "#00FFA8"
                              }]
                            }
                        }
                    }
                }]
            }]
          }
      }
    },
    methods:{
      // 违章查询数据
      getIllegalStatistical() {
        let projectId = localStorage.getItem('projectId')
        illgalAPI.IllegalStatistical(projectId).then(res => {
          this.chatData1.xAxis.data = res.dayReportList.map(item => {
            return item.date
          })
          this.chatData1.series[0].data = res.dayReportList.map(item => {
            return item.count
          })
          this.chatData.legend.data = res.categoryReportList.map(item => {
            return item.categoryName
          })
          this.chatData.series[0].data = res.categoryReportList.map(item => {
            return {
              name: item.categoryName,
              value: item.count
            }
          })
        })
      },
      more() {
        this.$router.push({
          path:'/TypeStatistical'
        })
      }
    },
    mounted() {
      this.getIllegalStatistical()
    }
  }
</script>

<style scoped lang="scss">
.title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
